/**
 * Created by weirong on 2017/12/7.
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  ImageBackground,
    Modal,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import Dialog from '../../routes/DialogTip'

export default class index extends React.Component{

  render() {

    const { userName, pwd, change, login, loading ,thisCancled ,ViewShowNum,showTheView,
      loginWait,thisPressIn,thisPressOut,ViewShow,showThisView,getApi} = this.props;
    let dialogText = this.props.dialogText;


    return (
     <View style={styles.container}>
       <ImageBackground source={require('../../assets/imgs/bg.jpg')}
              style={{width: '100%', height: '100%'}}>


           {/*<View>*/}
             {/*{*/}
               {/*ViewShow?*/}
                 {/*<View>*/}
                   {/*<TouchableOpacity　onPress={() =>{getApi('yth')*/}
                                                     {/*showThisView(ViewShow)}}>*/}
                     {/*<Text style={{color:'white'}}>一体化</Text>*/}
                   {/*</TouchableOpacity>*/}
                   {/*<TouchableOpacity onPress={() =>{getApi('tr')*/}
                                                    {/*showThisView(ViewShow)}}>*/}
                     {/*<Text style={{color:'white'}}>铜仁</Text>*/}
                   {/*</TouchableOpacity>*/}
                   {/*<TouchableOpacity onPress={() =>{getApi('tj')*/}
                                                    {/*showThisView(ViewShow)}}>*/}
                     {/*<Text style={{color:'white'}}>天津</Text>*/}
                   {/*</TouchableOpacity>*/}
                   {/*<TouchableOpacity onPress={() =>{getApi('gy')*/}
                                                    {/*showThisView(ViewShow)}}>*/}
                     {/*<Text style={{color:'white'}}>贵阳</Text>*/}
                   {/*</TouchableOpacity>*/}
                   {/*<TouchableOpacity onPress={() =>{getApi('ga')*/}
                                                    {/*showThisView(ViewShow)}}>*/}
                     {/*<Text style={{color:'white'}}>贵安</Text>*/}
                   {/*</TouchableOpacity>*/}
                 {/*</View>:*/}
                 {/*<TouchableOpacity onPress={() =>{showTheView(ViewShowNum)}}>*/}
                  {/*<View style={{height:40,width:40}}/>*/}
                 {/*</TouchableOpacity>*/}
             {/*}*/}
           {/*</View>*/}


       <View style={{flex:1,flexDirection: 'row', justifyContent:'center', alignItems: 'center'}}>


          <View style={styles.backgroundView} >
             <Text style={styles.titleLayout}>
               现场监督PDA系统
             </Text>

             <View>
               <TextInput
                 value={userName}
                 placeholder='账号'
                 maxLength={20}
                 onChangeText={(val) => change({userName: val})}
                 style={[styles.userNametext, styles.font]} />

               <TextInput
                 value={pwd}
                 placeholder='密码'
                 maxLength={18}
                 onChangeText={(val) => change({pwd: val})}
                 style={[styles.passwordText, styles.font]}
                 secureTextEntry={true}>
               </TextInput>

               <TouchableOpacity
                   onPressIn={thisPressIn}
                   onPressOut={thisPressOut}
               >
                 <View style={styles.loginButton}>
                   <Text style={styles.loginTitle}>
                     {
                       loading ? '登录中...' : '登录'
                     }
                   </Text>
                 </View>

               </TouchableOpacity>

             </View>

          </View>
         {
           dialogText === ''?null:
             <Dialog isShow={'true'} text={dialogText}/>
         }
       </View>
       </ImageBackground>
       <View>
         <Modal
             animationType='slide'
             onRequestClose={()=> this.onRequestClose()}
             visible={loginWait}>
           <View style={styles.mainView}>
             <View style={styles.dialogView}>
               <View style={styles.dialogTitle}>
                 <Text style={{fontSize:25}}>温馨提示</Text>
               </View>
               <View style={styles.dialogCenter}>
                 <Text style={{fontSize:18}}>加载中.....</Text>
               </View>
                 <View style={styles.dialogBottom}>

                     <View style={{flex:5,justifyContent: 'center',alignItems: 'center',borderRightWidth:0.5,borderRightColor:'white'}}>
                         <TouchableOpacity onPress={thisCancled}>
                             <Text style={{fontSize:18,color:Colors.btnPrimaryBg}}>跳过</Text>
                         </TouchableOpacity>
                     </View>

                 </View>
             </View>
           </View>
         </Modal>
       </View>
     </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: 'rgb(206,206,206)',
  },
  //背景
  backgroundView:{
    width: '50%',
    backgroundColor: 'rgba(0,0,0,0.2)',
    borderRadius:5,
    paddingTop: 50,
    paddingBottom: 50,
    paddingLeft: 60,
    paddingRight: 60,
  },
  userNametext:{
    fontSize: 10,
    marginTop: 10,
    // borderWidth:1,
  },
  userNameLine:{
    height: 0.75,
    backgroundColor:'rgb(154,167,168)',
  },
  passwordText:{
    marginTop: 15,
    fontSize: 10,
  },
  passwordLine:{
    height:0.75,
    backgroundColor:'rgb(154,167,168)',
  },
  //现场执法PDA系统
  titleLayout:{
    textAlign:'center',
    color:'white',
    fontSize: 30,
  },
  //登录按钮
  loginButton:{
    backgroundColor:'#fe9300',
    marginTop: 30,
    borderRadius: 3,
    borderColor:'rgba(0,0,0,0)',
  },
  //"登录"title
  loginTitle: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
    padding: 10,
    textAlign: 'center',
  },
  font: {
    color: '#fff',
    fontSize: 24,
    paddingTop: 20,
    paddingBottom: 20,
    borderColor: '#fff',
  },

    mainView:{
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(52,52,52,0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    dialogView:{
        width:'40%',
        height:'40%',
    },
    dialogTitle:{
        backgroundColor:Colors.backgroundLightGray,
        justifyContent: 'center',
        alignItems: 'center',
        borderTopLeftRadius:6,
        borderTopRightRadius:6,
        height:50,
    },
    dialogCenter:{
        backgroundColor:'white',
        justifyContent: 'center',
        alignItems: 'center',
        height:150,
    },
    dialogBottom:{
        backgroundColor:Colors.dataBlueBg,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomLeftRadius:6,
        borderBottomRightRadius:6,
        height:50,
        flexDirection: 'row',
        // flex:1
    },
});
